<template>
    <div class="product">
        <searchHead :option1="option1" :option2="option2" :title="'请输入商品名称或商家名字'" @getData="getData"/>
        <div class="main-box-info" ref="mainBox">
            <div class="product-boxs mt-10" v-for="item,index in dataList" :key="index">
                <van-card
                :class="['box-style',item.status == '1' ? 'green' : 'red' ]"
                :price="(Number(item.money)).toFixed(2)"
                :tag="statusEnum(Number(item.status))"
                :desc="'上架时间：'+item.create_time"
                :title="item.commodity+'（'+item.name+'）'"
                :thumb="'http://cnnn.bsmkj.cn'+item.spimage"
                >
                <template #tags>
                    <van-tag plain type="danger">库存：{{item.number}}件</van-tag>
                </template>
                <template #footer>
                    <van-button size="mini" @click="show(index,1)" v-if="!item.show">查看概率设定</van-button>
                    <van-button size="mini" @click="show(index,2)" v-if="item.show">收起概率设定</van-button>
                    <div class="coupon-box" v-if="item.show">
                        <div class="van-cell van-cell--center van-cell--borderless van-contact-card van-contact-card--edit" v-for="val,i in item.coupon" :key="i" v-if="item.coupon.length>0">
                            <i class="van-icon van-cell__left-icon"><van-icon name="bookmark" /></i>
                            <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                                <div >券值：{{ val.coupon }}元<span :class="[val.status == '1' ? 'greenColor' : 'redColor' ]">（{{statusEnum(Number(val.status))}}）</span></div>
                                <div><span class="mr-15">页面展示概率：{{ val.fake }}%</span>|<span class="ml-15">商品实际概率：{{ val.probability }}%</span></div>
                                <div></div>
                            </div>
                        </div>
                        <van-empty description="暂无概率设定" v-if="item.coupon.length == 0"/>
                    </div>
                </template>
                </van-card>
            </div>
            <div class="title" v-if="(dataList.length < total) && (loading == true)">加载中,请稍后...</div>
            <div class="title" v-if="(dataList.length == total)">没有数据啦</div>
        </div>
    </div>
</template>
<script>
import searchHead from '@/components/searchHead/searchHead.vue';
import Enums from "@/utils/enums.js";
export default {
  data() {
    return {
        option1: [
            { text: '全部类别', value: 0 },
            { text: '酒吧', value: 1 },
            { text: '茶叶', value: 2 },
        ],
        option2: [],
        dataList:[{
            commodity:'香飘飘奶茶',
            money:'4',
            name:'红旗超市',
            create_time:"2023-11-03 11:20:08",
            number:100,
            status: "1",
            spimage: "/uploads/20231103/12aa61cbf6df8c8482d223d5e6020497.png",
            coupon:[{
                coupon: "3",
                fake: 5,
                probability: 2.13,
                status: "2"
            },{
                coupon: "6",
                fake: 5,
                probability: 2.13,
                status: "1"
            }],
            show:false
        },{
            commodity:'茉莉清茶',
            money:'6',
            name:'红旗超市',
            create_time:"2023-11-03 11:20:08",
            number:40,
            status: "2",
            spimage: "/uploads/20231103/12aa61cbf6df8c8482d223d5e6020497.png",
            coupon:[],
            show:false
        }],
        searchForm:{},
        page: 1, // 当前页数
        total:2,
        limit:10,
        loading:false
    };
  },
  components: {
    searchHead
  },
  mounted() {
    this.option2 = Enums.stutasEnum.list
    this.$refs.mainBox.addEventListener('scroll',this.scroll,true)
  },
  methods: {
    getData(val){
        console.log(val)
        this.searchForm = val
        let obj = {
            page:1,
            limit:10,
            ...this.searchForm
        }
        // 调用请求
    },
    scroll() {
      const scrollTop = this.$refs.mainBox.scrollTop
      const windowHeight = this.$refs.mainBox.clientHeight
      const scrollHeight = this.$refs.mainBox.scrollHeight
      if (scrollTop + windowHeight >= scrollHeight ) {
          if(this.dataList.length >= this.total){
              this.loading = false
              console.log('没有数据啦')
          }else{
              this.loading = true
              this.page += 1
              console.log(this.page,'加载中')
              let obj = {
                page:this.page,
                limit:10,
                ...this.searchForm
              }
              // 调用请求
          }
      }
    },
    // 查看概率设定
    show(index,val){
        this.dataList[index].show = !this.dataList[index].show
        if(val == 1){
            //请求接口
        }
    }
  },
}
</script>
<style scoped lang="scss">
.product{
    width: 100%;
    height: 100vh;
    text-align: left;
    background-color: #f8f8f8;
}
.main-box-info{
    width: 95%;
    margin: 0 auto 0 auto;
    height: calc(100% - 105px);
    overflow-y: auto;
    .van-card{
        background-color: #fff !important;
        margin-bottom: 20px;
        .van-card__title{
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .van-ellipsis{
            margin-bottom: 5px;
        }
    }
    .green{
        .van-tag--mark{
            background-color: #2cb996;
        }
    }
    .red{
      .van-tag--mark{
            background-color: #f7aa62;
        }
    }
}
.coupon-box{
    width: 100%;
    margin-top: 10px;
    border-top: 1px solid #f8f8f8;
    .van-cell{
        padding: 16px 0;
    }
    .van-empty{
        padding: 0;
    }
}
.greenColor{
    color: #2cb996;
}
.redColor{
    color: #f7aa62;
}
.title{
    margin-top: 20px;
    text-align: center;
}
</style>